<template>
  <view class="cv-stepper-box">
    <view
      class="button-bg"
      :style="style.buttonStyle"
      @click="numberChange(false)"
    >
      <cv-icon name="icon-jianhao" :size="size" :color="color"></cv-icon>
    </view>
    <text class="count">{{ modelValue }}</text>
    <view
      class="button-bg"
      :style="style.buttonStyle"
      @click="numberChange(true)"
    >
      <cvIcon name="icon-jiahao1" :size="size" :color="color"></cvIcon>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import cvIcon from '../../icon/src/font/my-icon.vue'
import { number } from 'echarts'

const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0,
  },
  size: {
    type: Number,
    default: 28,
  },
  color: {
    type: String,
    default: '#40a9ff',
  },
})
const { modelValue, size, color } = toRefs(props)

const style = reactive({
  buttonStyle: {
    width: size.value + 'px',
    height: size.value + 'px',
    backgroundColor: color.value,
  },
})

const number = ref(0)

number.value = modelValue.value

const numberChange = (state: boolean) => {
  if (state) {
    number.value++
    emit('update:modelValue', number.value)
  } else {
    number.value--
    if (number.value < 0) {
      number.value = 0
    }
    emit('update:modelValue', number.value)
  }
}

watch(
  () => number.value,
  () => {
    emit('change', number.value)
  }
)

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.cv-stepper-box {
  width: 200rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .button-bg {
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .count {
    margin: 0 20rpx;
  }
}
</style>
